<template>
  <view class="index" :class="{'result': showResult}">
    <image
      v-if="!showResult"
      class="banner"
      src="./static/home_bg.jpg"
      mode="widthFix"
    ></image>
    <image
      v-if="showResult"
      class="result_banner"
      src="./static/result_bg.jpg"
      mode="widthFix"
    ></image>
    <view class="main_panel">
      <view v-if="!showResult" class="ind_from select_method">
        <view class="label">请选择预测方法</view>
        <view class="value">
          <view
            class="pub_radio"
            :class="{ active: methodType == 1 }"
            @click="selectMethod(1)"
            >父母身高预测法-FPH</view
          >
          <view v-if="methodType == 1" class="panel desc">
            <text class="p">计算公式如下：</text>
            <text class="p">男孩：0.78×父母平均身高+45.99±5.29厘米</text>
            <text class="p">女孩：0.75×父母平均身高+37.83±5.29厘米</text>
          </view>
          <view
            class="pub_radio"
            :class="{ active: methodType == 2 }"
            @click="selectMethod(2)"
            >瓦尔克尔氏预测法-一次预测法</view
          >
          <view v-if="methodType == 2" class="panel desc">
            <text class="p">这个方法是利用儿童少年某一时期的身高来预测未来的最终身高计算公式为：</text>
            <text class="p">参数B×当年身高+参数A</text>
          </view>
          <view
            class="pub_radio"
            :class="{ active: methodType == 3 }"
            @click="selectMethod(3)"
            >瓦尔克尔氏预测法-两次预测法</view
          >
          <view v-if="methodType == 3" class="panel desc">
            <text class="p">以两个时期的身高进行比较后得出最终身高，建议间隔月数为8-15个月公式为：</text>
            <text class="p">参数A+参数B×当年身高+（参数C)×（两次身高差×10+间隔月数）</text>
          </view>
        </view>
      </view>
      <view v-if="!showResult" class="ind_from">
        <view class="row">
          <view class="label">性别</view>
          <view class="value">
            <view
              class="pub_radio"
              :class="{ active: formData.gender == 1 }"
              @click="selectGender(1)"
              >男</view
            >
            <view
              class="pub_radio"
              :class="{ active: formData.gender == 0 }"
              @click="selectGender(0)"
              >女</view
            >
          </view>
        </view>
        <template v-if="methodType == 1">
          <view class="row">
            <view class="label">父亲身高</view>
            <view class="value">
              <input
                class="input"
                v-model="formData.fatherHeight"
                type="number"
                maxlength="3"
                placeholder="请输入"
              />
              <text class="suffix">厘米</text>
            </view>
          </view>
          <view class="row">
            <view class="label">母亲身高</view>
            <view class="value">
              <input
                class="input"
                v-model="formData.motherHeight"
                type="number"
                maxlength="3"
                placeholder="请输入"
              />
              <text class="suffix">厘米</text>
            </view>
          </view>
        </template>
        <template v-if="methodType == 2 || methodType == 3">
          <view class="row">
            <view class="label">当时测身高的年龄</view>
            <view class="value">
              <picker class="input" @change="thatTimeAgeChange" :value="thatTimeAgeIndex" :range="thatTimeAgeArr">
                <view class="uni-input">{{thatTimeAgeArr[thatTimeAgeIndex]}}</view>
              </picker>
              <text class="suffix">岁</text>
            </view>
          </view>
          <view v-if="formData.thatTimeAge !== ''" class="row">
            <view class="label">在{{formData.thatTimeAge}}岁时的身高</view>
            <view class="value">
              <input
                class="input"
                v-model="formData.thatTimeHeight"
                type="number"
                maxlength="3"
                placeholder="请输入"
              />
              <text class="suffix">厘米</text>
            </view>
          </view>
          <template v-if="methodType == 3">
            <view class="row">
              <view class="label">第一次和第二次测量间隔月数</view>
              <view class="value">
                <input
                  class="input"
                  v-model="formData.thatTimeIntervalMonths"
                  type="number"
                  maxlength="2"
                  placeholder="请输入"
                />
                <text class="suffix">个月</text>
              </view>
            </view>
            <view v-if="formData.thatTimeIntervalMonths !== ''" class="row">
              <view class="label">{{ formData.thatTimeAge }}岁过后{{ formData.thatTimeIntervalMonths }}个月的身高</view>
              <view class="value">
                <input
                  class="input"
                  v-model="formData.thatTimeHeight2"
                  type="number"
                  maxlength="3"
                  placeholder="请输入"
                />
                <text class="suffix">厘米</text>
              </view>
            </view>
          </template>
        </template>
      </view>
      <!-- <view v-if="!showResult" class="btn" @click="submit">{{
        isUnlock ? "预估" : "看广告获取预估结果"
      }}</view> -->
      <view v-if="!showResult" class="btn" @click="submit">预估</view>
      <view v-if="showResult" class="result_panel">
        <view class="title">预测孩子身高</view>
        <view class="height_range">
          <view class="range_item">
            <text class="label">最低身高</text>
            <text class="value">{{ result.minHeight || "--" }}</text>
            <text class="unit">厘米</text>
          </view>
          <view class="range_separator">~</view>
          <view class="range_item">
            <text class="label">最高身高</text>
            <text class="value">{{ result.maxHeight || "--" }}</text>
            <text class="unit">厘米</text>
          </view>
        </view>
        <view class="notice">
          <text class="notice_title">说明：</text>
          <text class="notice_content">此预测结果仅供参考，实际身高受遗传、营养、运动等多种因素影响。建议定期监测孩子身高发育情况。</text>
        </view>
        <view class="btn" @click="reCheck">重新预估</view>
      </view>
      <!-- <button class="addShortcut" open-type="addShortcut" :bindaddshortcut="eventHandler">添加到桌面</button> -->
      <!-- <button class="share" open-type="share">分享</button> -->
    </view>
    <view class="pub_ad_banner">
      <!-- #ifdef MP-TOUTIAO -->
      <ad
        :unit-id="adBannerIdDouyin"
        :ad-intervals="30"
        :fixed="false"
        type="banner"
        scale="100"
      />
      <!-- #endif -->
      <!-- #ifdef MP-KUAISHOU -->
      <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoCreate,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      thatTimeAgeIndex: 4,
      methodType: 1,
      thatTimeAgeArr: [6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5, 16.5, 17.5, 18.5, 19.5, 20.5],
      // 瓦尔克尔氏预测法参数表
      walckerParams: {
        // 一次预测法参数
        single: {
          male: {
            '6.5': [73.09, 0.88],
            '7.5': [71.85, 0.85],
            '8.5': [70.89, 0.82],
            '9.5': [71.86, 0.78],
            '10.5': [71.87, 0.75],
            '11.5': [75.38, 0.70],
            '12.5': [98.97, 0.52],
            '13.5': [111.68, 0.42],
            '14.5': [100.38, 0.47],
            '15.5': [68.02, 0.64],
            '16.5': [34.11, 0.82],
            '17.5': [15.85, 0.92],
            '18.5': [6.13, 0.97],
            '19.5': [2.00, 0.99],
            '20.5': [2.00, 0.99]
          },
          female: {
            '6.5': [50.09, 0.97],
            '7.5': [51.68, 0.91],
            '8.5': [54.57, 0.85],
            '9.5': [68.63, 0.71],
            '10.5': [90.89, 0.52],
            '11.5': [87.94, 0.57],
            '12.5': [77.08, 0.57],
            '13.5': [37.41, 0.80],
            '14.5': [12.40, 0.94],
            '15.5': [6.57, 0.97],
            '16.5': [4.39, 0.98],
            '17.5': [2.15, 0.99],
            '18.5': [1.71, 1.00],
            '19.5': [0.00, 1.00],
            '20.5': [0.00, 1.00]
          }
        },
        // 两次预测法参数
        double: {
          male: {
            '6.5': [75.40, 0.84, 0.35],
            '7.5': [74.31, 0.82, 0.25],
            '8.5': [72.24, 0.81, -0.03],
            '9.5': [70.85, 0.80, -0.30],
            '10.5': [68.04, 0.80, -0.65],
            '11.5': [65.47, 0.81, -1.20],
            '12.5': [63.90, 0.81, -1.65],
            '13.5': [99.03, 0.54, -0.95],
            '14.5': [101.71, 0.44, 0.50],
            '15.5': [53.40, 0.70, 0.75],
            '16.5': [21.92, 0.88, 0.60],
            '17.5': [14.67, 0.92, 0.40],
            '18.5': [7.80, 0.96, 0.25],
            '19.5': [3.70, 0.98, 0.15],
            '20.5': [1.84, 0.99, 0.10]
          },
          female: {
            '6.5': [44.23, 1.03, -0.20],
            '7.5': [49.10, 0.94, -0.20],
            '8.5': [53.25, 0.86, -0.05],
            '9.5': [63.34, 0.73, -0.25],
            '10.5': [73.07, 0.69, -1.05],
            '11.5': [76.71, 0.63, -0.75],
            '12.5': [73.93, 0.58, 0.20],
            '13.5': [31.16, 0.81, 0.95],
            '14.5': [14.56, 0.92, 0.50],
            '15.5': [6.32, 0.97, 0.25],
            '16.5': [4.39, 0.98, 0.20],
            '17.5': [2.15, 0.99, 0.00],
            '18.5': [1.71, 0.99, 0.00],
            '19.5': [0.00, 1.00, 0.00],
            '20.5': [0.00, 1.00, 0.00]
          }
        }
      },
      formData: {
        gender: 1,
        fatherHeight: "175",
        motherHeight: "165",
        thatTimeAge: "10.5",
        thatTimeHeight: "",
        thatTimeIntervalMonths: "",
        thatTimeHeight2: "",
      },
      result: {
        minHeight: "",
        maxHeight: "",
      },
    };
  },
  onLoad() {
    adVideoCreate();
  },
  methods: {
    selectGender(val) {
      this.formData.gender = val;
    },
    selectMethod(val){
      this.methodType = val;
    },
    thatTimeAgeChange(e){
      console.log("e", e.target.value);
      this.thatTimeAgeIndex = e.target.value;
      this.formData.thatTimeAge = this.thatTimeAgeArr[e.target.value];
    },
    eventHandler(e) {
      if (e.detail.errNo) {
        this.global.toast("添加到桌面失败");
      } else {
        this.global.toast("添加到桌面成功");
      }
    },
    reCheck(){
      this.showResult = false;
    },
    calculate() {
      let height = 0;
      let range = 0;

      if (this.methodType == 1) {
        // 父母身高预测法
        const avgParentHeight = (parseInt(this.formData.fatherHeight) + parseInt(this.formData.motherHeight)) / 2;
        if (this.formData.gender == 1) {
          height = 0.78 * avgParentHeight + 45.99;
          range = 5.29;
        } else {
          height = 0.75 * avgParentHeight + 37.83;
          range = 5.29;
        }
      } else if (this.methodType == 2) {
        // 瓦尔克尔氏预测法-一次预测法
        const params = this.walckerParams.single[this.formData.gender == 1 ? 'male' : 'female'][this.formData.thatTimeAge];
        if (params) {
          const [paramA, paramB] = params;
          height = paramB * parseInt(this.formData.thatTimeHeight) + paramA;
          range = 3; // 误差范围±3厘米
        }
      } else if (this.methodType == 3) {
        // 瓦尔克尔氏预测法-两次预测法
        const params = this.walckerParams.double[this.formData.gender == 1 ? 'male' : 'female'][this.formData.thatTimeAge];
        if (params) {
          const [paramA, paramB1, paramB2] = params;
          const height1 = parseFloat(this.formData.thatTimeHeight);
          const height2 = parseFloat(this.formData.thatTimeHeight2);
          const months = parseFloat(this.formData.thatTimeIntervalMonths);
          // 计算 (第二次身高-第一次身高)/间隔月数
          let diff = 0;
          if (months !== 0) {
            diff = (height2 - height1) / months;
          }
          height = paramA + paramB1 * height1 + paramB2 * diff;
          range = 3; // 误差范围±3厘米
        }
      }

      // 设置结果
      this.result.minHeight = Math.round(height - range);
      this.result.maxHeight = Math.round(height + range);
      this.showResult = true;
      this.isUnlock = true;
    },
    submit() {
      console.log("this.formData", this.formData);
      if (this.methodType == 1) {
        if(this.formData.fatherHeight == ""){
          this.global.toast("请输入父亲身高");
          return;
        }
        if(this.formData.motherHeight == ""){
          this.global.toast("请输入母亲身高");
          return;
        }
      } else if(this.methodType == 2 || this.methodType == 3){
        if(this.formData.thatTimeAge == ""){
          this.global.toast("请选择当时测身高的年龄");
          return;
        }
        if(this.formData.thatTimeHeight == ""){
          this.global.toast("请输入当时测量的身高");
          return;
        }
        if(this.methodType == 3){
          if(this.formData.thatTimeIntervalMonths == ""){
            this.global.toast("请输入间隔的月份数");
            return;
          }
          if(this.formData.thatTimeHeight2 == ""){
            this.global.toast(`请输入${this.formData.thatTimeAge}岁之后${this.formData.thatTimeIntervalMonths}个月测量的身高`);
            return;
          }
        }
      }
      this.calculate();
      // if (!this.isUnlock) {
      //   showAdConfirmModal(() => {
      //     try {
      //       adVideoShow(() => {
      //         this.calculate();
      //       });
      //     } catch (error) {
      //       this.calculate();
      //     }
      //   });
      // } else {
      //   this.calculate();
      // }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #f9f5ef;
  margin-top: 20rpx;
  border: 4rpx solid #b39569;
  border-radius: 10rpx;
  .desc{
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
    .p{
      display: block;
    }
  }

  .row {
    padding: 16rpx 20rpx;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    &:last-child {
      border-bottom: 0;
    }
    .label {
      margin-right: 5px;
      width: 190px;
      flex-shrink: 0;
    }
    .value {
      width: 100%;
      display: flex;
      align-items: center;
      .input {
        width: 70px;
        height: 35px;
        line-height: 35px;
        background: #fff;
        text-align: center;
        border-radius: 5px;
        margin-right: 6px;
        font-size: 18px;
      }
      .suffix {
        flex-shrink: 0;
      }
    }
    .pub_radio {
      display: inline-block;
      margin-right: 40rpx;
    }
  }
}
.refer {
  font-size: 14px;
  color: #8e8e8e;
  padding: 10px 10px;

  .panel {
    margin-bottom: 10px;
    .label {
      margin-bottom: 5px;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}
.select_method{
  padding: 10px 10px;
  .label{
    margin-bottom: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #286900;
  }
  .value{
    .pub_radio{
      margin-bottom: 10px;
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
}
.main_panel{
  width: 94%;
  margin: -30px auto 0 auto;
  position: relative;
}
.btn {
  margin-top: 30rpx;
  background: #00c853;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
}
.sub_text {
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  .red {
    color: red;
  }
  .bold {
    font-weight: bold;
  }
}
.pub_ad_banner {
  margin-top: 30rpx;
}
.result_banner{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.result{
  .main_panel{
    margin: 100px auto 0 auto;
  }
  // background: url("./static/result_bg.jpg") no-repeat center center;
}
.result_panel {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  text-align: center;
  margin: 30rpx;
  animation: fadeIn 0.5s ease-out;
}

.result_panel .title {
  font-size: 36rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 40rpx;
}

.result_panel .height_range {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30rpx 0;
}

.result_panel .range_item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result_panel .range_item .label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.result_panel .range_item .value {
  font-size: 72rpx;
  color: #4A90E2;
  font-weight: bold;
  line-height: 1;
}

.result_panel .range_item .unit {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

.result_panel .range_separator {
  font-size: 48rpx;
  color: #999;
  margin: 0 40rpx;
  padding-top: 40rpx;
}

.result_panel .notice {
  background: #F5F7FA;
  border-radius: 12rpx;
  padding: 24rpx;
  margin: 40rpx 0;
  text-align: left;
}

.result_panel .notice .notice_title {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  display: block;
  margin-bottom: 12rpx;
}

.result_panel .notice .notice_content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.result_panel .btn {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #fff;
  padding: 24rpx 60rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  display: inline-block;
  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
  transition: all 0.3s ease;
}

.result_panel .btn:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(74, 144, 226, 0.2);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>